<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <title>Document</title>
    <script src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
    <script src="./jquery.validate.js"></script>
    <script src=""></script>
    <style>
        .error {
            color: red;
        }
    </style>
</head>

<body>
    <div class="container" style="margin-top:50px; ">
        <table class="table">
            <thead>
                <tr class="active">
                    <th>
                        <input type="checkbox" onchange="sel(this)">全选</th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>手机</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>

        <button id="addBtn" type="button" class="btn btn-primary">添加</button>
        <button id="ContraryBtn" type="button" class="btn btn-primary">反选</button>
        <button id="delBtn" type="button" class="btn btn-danger">删除</button>

        <form id="formid" class="form-horizontal" style="margin-top:50px;margin-bottom:50px; display: none">
            <div class="form-group">
                <label for="ID" class="col-sm-2 control-label">ID</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="ID" name="ID" placeholder="number">
                </div>
            </div>
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-4">
                    <input type="text" name="username" class="form-control" id="username" placeholder="username">
                </div>
            </div>
            <div class="form-group">
                <label for="age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-4">
                    <input type="text" name="age" class="form-control" id="age" placeholder="age">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-4">
                    <label class="radio-inline">
                        <input type="radio" name="gender" id="boy" value="boy"> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="gender" id="girl" value="girl"> 女
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label for="Email" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-4">
                    <input type="text" name="email" class="form-control" id="Email" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="phone" class="col-sm-2 control-label">手机</label>
                <div class="col-sm-4">
                    <input type="text" name="phone" class="form-control" id="phone" placeholder="phone">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success">确定</button>
                    <button id="close" type="button" class="btn btn-warning">关闭</button>
                </div>
            </div>
        </form>
    </div>




    <form id="editForm" class="form-horizontal" style="margin-top:50px;margin-bottom:50px; display: none">
        <div class="form-group">
            <!-- <label for="ID" class="col-sm-2 control-label">ID</label> -->
            <div class="col-sm-4">
                <input type="hidden" class="form-control" id="ID" name="ID" placeholder="number">
            </div>
        </div>
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-4">
                <input type="text" name="username" class="form-control" id="username" placeholder="username">
            </div>
        </div>
        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-4">
                <input type="text" name="age" class="form-control" id="age" placeholder="age">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
            <div class="col-sm-4">
                <label class="radio-inline">
                    <input type="radio" name="gender" id="boy" value="boy"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gender" id="girl" value="girl"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="Email" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-4">
                <input type="text" name="email" class="form-control" id="Email" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label for="phone" class="col-sm-2 control-label">手机</label>
            <div class="col-sm-4">
                <input type="text" name="phone" class="form-control" id="phone" placeholder="phone">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">保存</button>
                <button id="closeEdit" type="button" class="btn btn-warning">关闭</button>
            </div>
        </div>
    </form>
</body>
<script>
    var users = [
        {
            id: 1,
            username: '悟空',
            age: 22,
            gender: 'boy',
            email: 'null@qq.com',
            phone: '13733789435',
        },
        {
            id: 2,
            username: '王熙凤',
            age: 34,
            gender: 'girl',
            email: 'Phoenix@qq.com',
            phone: '17538789435',
        },
        {
            id: 3,
            username: '令狐冲',
            age: 20,
            gender: 'boy',
            email: 'Fox@qq.com',
            phone: '15568789435',
        },
        {
            id: 4,
            username: '杨过',
            age: 20,
            gender: 'boy',
            email: 'fault@qq.com',
            phone: '14568758635',
        },
        {
            id: 5,
            username: '卢俊义',
            age: 43,
            gender: 'boy',
            email: 'lu@qq.com',
            phone: '17956758635',
        },
    ];
    // 添加按钮
    $('#addBtn').on('click', function () {
        $('#formid').show();
    });
    // 关闭
    $('#close').on('click', function () {
        $('#formid').hide();
        $(':input', '#formid').val('');
    });

    // 添加内容
    function RenderData() {
        $('tbody').empty();
        $.each(users, function (index, val) {
            var tr = $('<tr></tr>');
            tr.append($('<td></td>').append($('<input>').prop('type', 'checkbox').attr('idt', val.id))).prop('class', 'success');
            tr.append($('<td></td>').text(val.id));
            tr.append($('<td></td>').text(val.username));
            tr.append($('<td></td>').text(val.age));
            tr.append($('<td></td>').text(val.gender));
            tr.append($('<td></td>').text(val.email));
            tr.append($('<td></td>').text(val.phone));
            tr.append($('<td></td>').append([
                $('<button></button>').attr('idt', val.id).prop('class', 'btn btn-danger').addClass('del').text('删除'),
                $('<button></button>').attr('idt', val.id).prop('class', 'btn btn-primary').addClass('edit').text('编辑'),
            ]));
            $('tbody').append(tr);
        });
    };
    RenderData();
    // 删除
    $('#tbody').on('click', '.del', function () {
        if (!confirm('确定删除？')) {
            return
        };
        var id = $(this).attr('idt');
        var idindex;
        $.each(users, function (index, val) {
            if (val.id == id) {
                idindex = index;
            };
        });
        users.splice(idindex, 1);
        RenderData();
    });
    // 验证
    $('#formid').validate({
        rules: {
            ID: {
                required: true,
                digits: true,
            },
            username: {
                required: true,
            },
            age: {
                required: true,
                digits: true,
                range: [0, 100]
            },
            email: {
                required: true,
                email: true,
            }
        },
        messages: {
            ID: {
                required: '必填字段',
                digits: '必须为数字',
            },
            username: {
                required: '必填字段',

            },
            age: {
                required: '必填字段',
                digits: '类型为数字',
                range: '正确输入有效数字'
            },
            email: {
                required: '必填字段',
                email: '请输入正确邮箱地址'
            },
        },
        submitHandler: function () {
            var row = {};
            row.id = $('input[name="ID"]').val();
            row.username = $('input[name="username"]').val();
            row.age = $('input[name="age"]').val();
            row.gender = $('input[name="gender"]').val();
            row.email = $('input[name="email"]').val();
            row.phone = $('input[name="phone"]').val();
            // 填入进users
            users.push(row);
            RenderData();
        }
    });
    // 全选
    function sel(_this) {
        $('tbody [type = "checkbox"]').prop('checked', _this.checked)
    };
    // 反选
    $('#ContraryBtn').on('click', function () {
        $('tbody [type = "checkbox"]').prop('checked', function (index, val) {
            this.checked = !val
        });
    });
    // 选择删除按钮
    $('#delBtn').on('click', function () {
        if (!confirm('确定删除？')) {
            return
        };
        $('tbody input:checked').attr('idt', function (index, val) {
            console.log(index);

            var idindex;
            $.each(users, function (index, val) {
                if (val.id == index) {
                    idindex = index;
                };
            });
            users.splice(idindex, 1);
        })
        RenderData();
    });


    //  编辑
    $('#tbody').on('click','.edit', function () {
        $('#formid').hide();
        $('#editForm').show();
        var idt = $(this).attr('idt');
        var idx;
        $.each(users, function (index, row) {
            if (row.id == idt) {
                idx = index;
            };
        });
        $('#editForm [name=ID]').val(users[idx].id);
        $('#editForm [name=username]').val(users[idx].username);
        $('#editForm [name=age]').val(users[idx].age);
        $('#editForm [name="'+users[idx].gender+'"]').prop('checked',true);
        $('#editForm [name=email]').val(users[idx].email);
        $('#editForm [name=phone]').val(users[idx].phone);
        // editForm.gender.value = users[idx].gender;
    });
    // 关闭编辑
    $('#closeEdit').on('click', function () {
        $('#editForm').hide();
    });

    // 保存验证

    $('#editForm').validate({
        rules: {
            ID: {
                required: true,
                digits: true,
            },
            username: {
                required: true,
            },
            age: {
                required: true,
                digits: true,
                range: [0, 100]
            },
            email: {
                required: true,
                email: true,
            }
        },
        messages: {
            ID: {
                required: '必填字段',
                digits: '必须为数字',
            },
            username: {
                required: '必填字段',

            },
            age: {
                required: '必填字段',
                digits: '类型为数字',
                range: '正确输入有效数字'
            },
            email: {
                required: '必填字段',
                email: '请输入正确邮箱地址'
            },
        },
        submitHandler: function () {
            var id = $('#editForm [name="ID"]').val();
            var idx;
            $.each(users, function (index, row) {
                if (row.id == id) {
                    idx = index;
                };
            });
            users[idx].id = $('#editForm [name="ID"]').val();
            users[idx].username = $('#editForm [name="username"]').val();
            users[idx].age = $('#editForm [name="age"]').val();
            users[idx].gender = $('#editForm [name="gender"]').val();
            users[idx].email = $('#editForm [name="email"]').val();
            users[idx].phone = $('#editForm [name="phone"]').val();
            RenderData();
        }
    });
</script>

</html>